<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

	<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
	<script src="./dist_dagre-d3.min.js"></script>

<!-- Pull in JQuery dependencies -->
<link rel="stylesheet" href="tipsy.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="tipsy.js"></script>

<style id="css">
body {
  font: 300 14px 'Helvetica Neue', Helvetica;
}

.node rect,
.node circle,
.node ellipse {
  stroke: #333;
  fill: #fff;
  stroke-width: 1px;
}

.edgePath path {
  stroke: #333;
  fill: #333;
  stroke-width: 1.5px;
}

.node rect {
  background: lightblue;
  font-size: 16px;
  color: white;
  width: 50px;
  height: 50px;
}


.screenfull-svg {
    cursor: pointer;
    /*fill: red; */    
   }

/* This styles the title of the tooltip */
.tipsy .name {
  font-size: 1.5em;
  font-weight: bold;
  color: #60b1fc;
  margin: 0;
}

/* This styles the body of the tooltip */
.tipsy .description {
  font-size: 1.2em;
}

.edgePath path.path {
  stroke: #333;
  fill: none;
  stroke-width: 1.5px;
}
</style>
</head>
<body>
	 

 <h2 id="title">应用内部-模块间调用链路图-</h2>  

<svg width="1260" height="600" class="screenfull-svg"><g/></svg>

<!-- 
<section>
<p>A sample that shows the different arrows available in dagre-d3.
</section>
 -->
<script id="js">
// =========================================== 文档 ------======
// ============   node shape可选值
//        rect, circle,ellipse,diamond
// ============   Edge的arrowhead可选值
//        "normal", "vee", "undirected"
	QueryString = { 
		    data: {}, 
		    Initial: function() { 
		        var aPairs, aTmp; 
		        var queryString = new String(window.location.search); 
		        queryString = queryString.substr(1, queryString.length); //remove   "?"    
		        aPairs = queryString.split("&"); 
		        for (var i = 0; i < aPairs.length; i++) { 
		            aTmp = aPairs[i].split("="); 
		            this.data[aTmp[0]] = aTmp[1]; 
		        } 
		    }, 
		    GetValue: function(key) { 
		        return this.data[key]; 
		    } 
	};
	
	QueryString.Initial();

   $.ajax({
       type: "get",
       url: "./find2",
       dataType: "json",
       cache: false,
       async: false,
       data: {"traceId": QueryString.GetValue('traceId')},
       success: function (data, status, jqXHR) {
    	   
    	   
    	  $("#title").html($("#title").html() + data.url); 
	      // Create a new directed graph
	      var g = new dagreD3.graphlib.Graph().setGraph({});
	
	      g.setGraph({
	          nodesep: 70,
	          ranksep: 50,
	          rankdir: "LR", // 流程方向
	          marginx: 20,
	          marginy: 20
	        });
	
	        
	      // 设置节点
	      data = data.flowdata;
	      g.setNode('actor', { label: 'actor',shape: "circle"});
	      g.setEdge('actor', data.label, {
		        arrowhead: 'vee',
		        label: "第1步",
		        style: "stroke-width: 1px;",
		        curve: d3.curveBasis		        
		      });	  
	      /*
	      g.setEdge(data.label, 'actor', {
		        arrowhead: 'vee',
		        label: "",
		        style: "stroke: #f66; stroke-width: 1px;",
		        arrowheadStyle: "fill: #f66",
		        curve: d3.curveBasis		        
		      });
	      */
	      loopPoint(data, g, 2);
	      
	      
	      
	      
	      var svg = d3.select('svg');
	      var inner = svg.select('g');
	
	
	
	      // 可以收缩放大
	      var zoom = d3.zoom().on("zoom", function() {
	            inner.attr("transform", d3.event.transform);
	          });
	      svg.call(zoom);
	
	      // 渲染到页面
	      var render = new dagreD3.render();
	      render(inner, g);
	
	      // Simple function to style the tooltip for the given node.
	      var styleTooltip = function(name, description) {
	        return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
	      };
	      inner.selectAll("g.node")
	        .attr("title", function(v) { return styleTooltip(v, g.node(v).description) })
	        .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });
	
	
	      var initialScale = 0.75;
	      svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
	      //svg.attr('height', g.graph().height * initialScale + 40);
         
       },
       error: function (request, status, ex) {
                console.error(status + ";" + ex);
                alert("错误, 请查看控制台!");
       }
   });
   
   function loopPoint(point,graph,num){
	   graph.setNode(point.label, { label: point.label,shape: "ellipse", description: point.description || point.label,
		    style: point.success ? "fill:#7f7" : "fill:#f77" });
	   
	   if(!point.lines){
		   return;
	   }	   
	   if(point.lines.length == 0){
		   return;
	   }
	  
	   var numInner = num;
	   point.lines.forEach(function(item, index){
		   var rightPoint = item.rightPoint;
		   numInner += 1;
		   //往
		   graph.setEdge(point.label, rightPoint.label, {
		        arrowhead: 'vee',
		        label: '第' + numInner + '步',
		        style: "stroke-width: 1px;",		        
		        curve: d3.curveBasis  		        
		      });
		  
		   /*
		   //返
		   graph.setEdge(rightPoint.label, point.label, {
		        arrowhead: 'vee',
		        label: '',
		        style: "stroke: #f66; stroke-width: 1px;",
		        arrowheadStyle: "fill: #f66",
		        curve: d3.curveBasis  		        
		      });		   
		   */
		   
		   loopPoint(rightPoint, graph, numInner);
	   });
	   
   }
   
   // 暂未启用
   function loopChildrenSize(point, total){
	   if(!point.lines){
		   return total;
	   }	   
	   if(point.lines.length == 0){
		   return total;
	   }
	   
	   point.lines.forEach(function(item, index){		   	   
		   total += 1;
		   loopChildrenSize(item,total);
	   });	   
	   
   }


</script>
</body>
</html>
